<template>
    <div id="ranking_list">
        <ul>
            <li v-for="(item, index) in BasicData" :key="index">
                <span class="index">{{index +1}}</span><span class="type">{{item.type}}</span><b>{{item.useNum}}</b>
            </li>
        </ul>
    </div>
</template>


<script>
    export default {
        name:'RankingList',
        props:[
            'BasicData'
        ],
        data: function(){
            return{
            }
        },
        mounted () {
            let BasicData = this.BasicData
        }
    }
</script>


<style scoped>
#ranking_list{height: 288px; overflow: auto; padding-right: 5%;}
/*滚动条样式*/
#ranking_list::-webkit-scrollbar {width: 6px; height: 1px;}
#ranking_list::-webkit-scrollbar-thumb {border-radius: 6px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); background: #888;}
#ranking_list::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); border-radius: 6px; background: #EDEDED;}

#ranking_list ul li{list-style: none; line-height: 36px;}
#ranking_list ul li b{float: right; font-weight: 400;}
#ranking_list ul li span{height: 20px; line-height: 20px; width: 20px; border-radius: 10px; display: inline-block;}
#ranking_list ul li span.index{text-align: center; background-color: #efefef; color: #444;}
#ranking_list ul li span.type{margin-left: 30%;}
#ranking_list ul li:nth-child(1) span.index{background-color: #314659; color: #fff;}
#ranking_list ul li:nth-child(2) span.index{background-color: #314659; color: #fff;}
#ranking_list ul li:nth-child(3) span.index{background-color: #314659; color: #fff;}
</style>